<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GDP</title>
    <script src="../lib/d3.js"></script>
    <script src="../lib/echarts.js"></script>
</head>
<body>
<div id="main" style="height:100vh;width: 100vw; "></div>
<script src="../lib/china.js" type="text/javascript"></script>
<script>

    var myChart = echarts.init(document.getElementById('main'));
    var geoCoordMap = {
        "海门":[121.15,31.89],
        "鄂尔多斯":[109.781327,39.608266],
        "招远":[120.38,37.35],
        "舟山":[122.207216,29.985295],
        "齐齐哈尔":[123.97,47.33]
    };

    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };

    var option = {
        timeline: {
            axisType: 'category',
            autoPlay: true,
            playInterval: 2000,
            symbol: 'circle',
            inverse: false,
            rewind: true,
            symbolSize: 5,
            checkpointStyle: {
                symbol: 'circle',
                symbolSize: 7,
                color: '#aed2ff',
                borderColor: "#aed2ff"
            },
            left: "1%",
            width: '90%',
            height: '36',
            lineStyle: {
                color: "#454e72"
            },
            label: {
                normal: {
                    textStyle: {
                        color: "#aed2ff",
                        fontSize: 14,
                    }
                },
                position: 15,
                formatter: function(value, index) {
                    return value.replace(/-/g, ".");
                }
            },
            data: ['05-15','05-16']
        },
        baseOption: {

            backgroundColor: '#404a59',
            title: {
                text: '全国主要城市空气质量',
                subtext: 'data from xiaoYu3328',
                sublink: 'http://localhost',
                x: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return params.name + ' : ' + params.value[2];
                }
            },
            legend: {
                orient: 'vertical',
                y: 'bottom',
                x: 'right',
                data: ['pm2.5'],
                textStyle: {
                    color: '#fff'
                }
            },
            visualMap: {
                min: 0,
                max: 200,
                calculable: true,
                inRange: {
                    color: ['#50a3ba', '#eac736', '#d94e5d']
                },
                textStyle: {
                    color: '#fff'
                }
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series: [
                {
                    name: 'pm2.5',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData([
                        {name: "海门", value: 9},
                        {name: "鄂尔多斯", value: 12},
                        {name: "招远", value: 12},
                        {name: "舟山", value: 12},
                        {name: "齐齐哈尔", value: 14}

                    ]),
                    symbolSize: 12,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            borderColor: '#fff',
                            borderWidth: 1
                        }
                    }
                }
            ]

        }, options:[{
            title: {
                text: '全国主要城市空气质量',
                subtext: 'data from xiaoYu3328',
                sublink: 'http://localhost',
                x: 'center',
                textStyle: {
                    color: '#fff'
                }
            },series: [
                {
                    name: 'pm2.5',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData([
                        {name: "海门", value: 9},
                        {name: "鄂尔多斯", value: 555},
                        {name: "招远", value: 12},
                        {name: "舟山", value: 12},
                        {name: "齐齐哈尔", value: 14}
                    ])}]
        },{
            title: {
                text: '全国主要城市空气质量',
                subtext: 'data from xiaoYu3328',
                sublink: 'http://localhost',
                x: 'center',
                textStyle: {
                    color: '#fff'
                }
            },series: [
                {
                    name: 'pm2.5',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData([
                        {name: "海门", value: 9},
                        {name: "鄂尔多斯", value: 5},
                        {name: "招远", value: 12},
                        {name: "舟山", value: 12},
                        {name: "齐齐哈尔", value: 14}
                    ])}]
        }]
    };


    myChart.setOption(option);
    d3.select("canvas").style("opacity", 0)
        .transition()
        .duration(1000)
        .style("opacity", 1);


</script>
</body>
</html>